<template>
  <div class="videoItem">
    <div class="preview">
      <img :src="data.cover" alt="">
      <div class="mask">
        <h3 class="title">{{data.name}}</h3>
        <div class="des">视频描述：{{data.des || '无'}}</div>
        <img :src="data.qrCode" alt="" class="qrCode">
        <div class="operate">
          <i class="icon icon-delete" @click="handleDel" title="删除"></i>
          <a :href="`${env.baseUrl}/content/source/download?sourceIds=${data.id}&__token=${token}`" class="icon icon-xiazai" title="下载" download></a> 
          <i class="icon icon-lianjie copy"  :data-clipboard-text="data.url" title="复制链接"></i>
          <i class="icon icon-shoucang" :hasFavorite="data.hasFavorite" title="点赞" @click="handleThumb(data.id)"></i>
        </div>
      </div>
    </div>
    <a class="title" :href="data.url" target="_blank">{{data.name}}</a>
    <div class="info">
      <div class="createrInfo">
        <img :src="env.baseUrl+'/sys/member/avatar/s/'+data.uid" alt="" class="avatar">
        <span class="creater" :title="data.username">{{data.username}}</span>
      </div>
      <span class="stars"><i class="icon icon-shoucang"></i>{{data.favoriteNum}}</span>
      <span class="views"><i class="icon icon-guankan"></i>195.6万</span>
    </div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'
  import env from '@/config/env'
  export default {
    props: ['data'],
    computed: {
      env () {
        return env
      },
      token () {
        return localStorage.getItem('UBToken')
      }
    },
    methods: {
      ...mapActions(['delSource', 'thumbSource']),
      // 删除
      handleDel () {
        this.$confirm('是否确认删除', '确认', {type: 'warning'})
          .then(() => {
            return this.delSource([this.data.id])
          })
          .then(res => {
            this.$bus.$emit('reloadSource')
          })
      },
      // 点赞
      async handleThumb (id) {
        const res = await this.thumbSource(id)
        if (res.data.code === 1) {
          this.data.favoriteNum++
          this.data.hasFavorite = true
        }
      }
    }
  }
</script>
<style lang="scss">
  .videoItem{
    position:relative;margin:10px;width:238px;height:312px;border:1px solid #d3dce6;
    .preview{
      cursor:pointer;
      img{display:block;width:100%;height:238px;}
    }
    .title{display:block;padding:0 12px;height:36px;line-height:36px;font-size:16px;text-decoration:none;color:#5e6b7c;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .info{padding:0 12px;line-height:24px;color:#99a9bf;overflow:hidden;}
    .createrInfo{float:left;max-width:100px;overflow:hidden;white-space:nowrap;}
    .avatar{display:inline-block;height:24px;width:24px;border-radius:50%;vertical-align:top;}
    .stars{float:right;}
    .views{float:right;margin-right:12px;}
    .icon{margin-right:2px;font-size:12px;}
    .mask{
      &{display:none;position:absolute;top:0;left:0;width:100%;height:238px;background:rgba(0,0,0,.6);}
      .qrCode{position:absolute;bottom:45px;left:59px;width:120px;height:120px;}
      .title{height:30px;line-height:30px;font-size:14px;color:#fff;text-align:left}
      .des{padding-left:12px;color:#fff}
      .operate{position:absolute;bottom:0;width:100%;height:40px;line-height:40px;color:#fafafa;text-align:right;}
      .icon{margin:0 6px;font-size:16px;color:#fff}
      .icon[hasFavorite]{color:red}
    }
    .preview:hover .mask{display:block;}
  }
</style>
